<template>
	<view>
		<view
			class="Administrators-content ff-color-222 ff-font-14 ff-bg-fff ff-margin-left-10 ff-margin-right-10 ff-margin-top-15 ff-border-radius-10">
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-font-15">
				<view class="ff-font-weight-600 ff-font-15">忘记密码</view>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>手机号</view>
				<input class="ff-text-right ff-line-height-1-3" placeholder="请输入手机号" placeholder-style="color:#999"
					type="number" maxlength="11" v-model.trim="infos.phone" />
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>验证码</view>
				<input class="ff-text-center ff-line-height-1-3" placeholder="请输入验证码" placeholder-style="color:#999"
					type="text" v-model.trim="infos.validCode" />
				<view class="ff-width-80 ff-text-right">
					<view @click.stop="getCode" v-if="timeState" class="ff-color-blue">{{codeBut}}</view>
					<view v-else class="ff-color-999">
						{{codeContent}}
					</view>
				</view>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>新密码</view>
				<u-input class="ff-line-height-1-3" input-align="right" placeholder="请输入新密码"
					placeholder-style="color:#999" type="password" v-model="infos.newPsd" />
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>确认密码</view>
				<u-input class="ff-line-height-1-3" input-align="right" placeholder="请确认密码"
					placeholder-style="color:#999" type="password" v-model.trim="infos.confirmPsd" />
			</view>
		</view>
		<view class="forgetPassword-butList">
			<u-button type="primary" shape="circle" @click="submitClick">确定</u-button>
		</view>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				infos: {
					phone: "", // 手机号
					validCode: "", // 验证码
					newPsd: "", // 密码
					confirmPsd: "", // 确认密码
				},
				timeState: true, // 时间显/隐
				codeBut: '获取验证码',
				count: 60, // 验证码
				codeContent: '',
				timeer: null // 定时器
			};
		},
		methods: {
			// 获取验证码
			getCode() {
				if (!this.$check.isMobile(this.infos.phone)) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号',
						type: 'error'
					});
					return
				}

				this.getCodeInfo() // 获取手机验证码
			},
			// 获取手机验证码
			async getCodeInfo() {
				const data = await this.$http.get({
					url: `/sys/user/sendUpdPsdCode/${this.infos.phone}`
				})
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					if (!this.timeState) return
					this.timeState = false
					this.codeContent = `重新获取(${this.count}s)`
					this.timeer = setInterval(() => {
						this.count--
						this.codeContent = `重新获取(${this.count}s)`
						if (this.count < 0) {
							this.count = 60
							this.timeState = true
							this.codeBut = '重新获取'
							clearInterval(this.timeer) // 清除定时器
						}
					}, 1000)
				} else {
					uni.showModal({
						title: '温馨提示',
						content: data.msg,
						confirmColor: '#3178FF',
						showCancel: false,
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {}
						},
					})
				}
			},
			// 提交--修改密码
			async submitClick() {
				let that = this
				if (!this.$check.isMobile(this.infos.phone)) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号',
						type: 'error'
					});
					return;
				}
				if (!this.infos.validCode) {
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error'
					});
					return;
				}
				if (!this.infos.newPsd) {
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'error'
					});
					return;
				}
				if (this.infos.newPsd != this.infos.confirmPsd) {
					this.$refs.uToast.show({
						title: '两次密码不一致，请检查后输入',
						type: 'error'
					});
					return;
				}
				this.$refs.loading.openLoading('提交中···');
				const data = await this.$http.post({
					url: '/sys/user/updPsdV2',
					data: this.infos
				})
				// console.log('修改密码返回---', data)
				this.$refs.loading.closeLoading();
				if (data.code == 200) {
					uni.showModal({
						title: '温馨提示',
						content: '密码修改成功，去登录',
						confirmColor: '#3178FF',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								that.$pageJump.reLaunch('/pages/loginRegister/login/Login');
							}
						},
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: data.msg,
						confirmColor: '#3178FF',
						showCancel: false,
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {}
						},
					})
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.ff-width-80 {
		width: 200rpx;
	}

	.forgetPassword-butList {
		width: 90%;
		margin: 30% 5%;
	}
</style>